
<template>
	<view>
		<view class="page-body">
		    <view class="page-section page-section-gap">
		        <map style="width: 100%; height: 300px;" 
				   :controls="controls" 
				   :circles="circles" 
				   :polyline='polyline' 
				   :scale="scale" 
				   :latitude="latitude" 
				   :longitude="longitude" 
				   :markers="covers"
				   show-location="true"
				   @markertap="markertap"
				   @tap="chossLoaction"
				   >
		        </map>
		    </view>
		</view>
	</view>
</template>
 
<script>
	export default {
		data() {
			return {
				title: 'map',
				latitude: 34,
				longitude: 113.68,
				covers: [{
				    latitude: 34,//纬度
				    longitude: 113,//经度
				    iconPath: '../../static/logo.png',	//显示的图标			
					title:'阿打算',//标注点名
					label:{//为标记点旁边增加标签
				            content:'文本1',//文本
				            color:'#F76350',//文本颜色
					    anchorX:0,//label的坐标，原点是 marker 对应的经纬度
					    anchorY:-80,//label的坐标，原点是 marker 对应的经纬度 
// 					    x:39.909,//这个组件微信在1.2.0以后就废弃了
// 					    y:116.39742,
				            bgColor:'#fff',//背景色
				            padding:5,//文本边缘留白
					    borderWidth:1,//边框宽度
					    borderColor:'#D84C29',//边框颜色							
					    textAlign:'right'//文本对齐方式。
				     },
					 callout:{//自定义标记点上方的气泡窗口 点击有效
				            content:'地点1',
				            color:'#F76350',
				            fontSize:12,
							borderRadius:5,
				     },
// 					 anchor:{//经纬度在标注图标的锚点，默认底边中点
// 						 x:5,
// 						 y:1,
// 					  }
				}, {
				    latitude: 34,
				    longitude: 113,
				    iconPath: '../../static/weixin.png',
					title:'阿迪达斯',
					x:39.90,
					y:116.399,
					label:{
					        content:'文本2',
					        color:'#F76350',
					        bgColor:'#fff',
					        padding:5,
					        borderRadius:4,
					 },
					 callout:{
					        content:'地点2',
					        color:'#F76350',
					        fontSize:12
					 }
				}],
				scale:15,//地图层级
				controls:[{//在地图上显示控件，控件不随着地图移动
					id:1,//控件id
					iconPath:'../../static/logo.png',//显示的图标	
					position:{//控件在地图的位置
						left:15,
						top:15,
						width:50,
						height:50
					},	
				}],
				circles:[{//在地图上显示圆
					latitude: 34,
					longitude: 113,
					fillColor:"#fff",//填充颜色
					color:"#12A1DD",//描边的颜色
					radius:500,//半径
					strokeWidth:2//描边的宽度
				}],
				polyline:[{//指定一系列坐标点，从数组第一项连线至最后一项
					points:[
						{latitude: 39.909,longitude: 116.39742},
						{latitude: 39.90,longitude: 116.39},
					],
					color:"#0000AA",//线的颜色
					width:2,//线的宽度
					dottedLine:true,//是否虚线
					arrowLine:true,	//带箭头的线 开发者工具暂不支持该属性
				}],
				
				
			};
		},
		onLoad(){
			var that =this;
			uni.getLocation({//获取当前的位置坐标
				type: 'wgs84',
				geocode:"true",
				success: function (res) {
					console.log(res)
					that.longitude	= res.longitude;
					that.latitude = res.latitude;
					
					console.log('当前位置的经度：' + res.longitude);
					console.log('当前位置的纬度：' + res.latitude);
				}
			});  
			
		},
		onShow (){
			const base64 = 'test'
			const arrayBuffer = uni.base64ToArrayBuffer(base64)	
			console.log(arrayBuffer)
		},
		onBackPress(options) {
		        console.log('from:' + options.from)
		    },
		methods:{
			 markertap() {
				 uni.showToast({
				 	title:'点击触发',
					icon:'none'
				 })
			 },
			 chossLoaction (){
				uni.chooseLocation({
					success: function (res) {
						console.log('位置名称：' + res.name);
						console.log('详细地址：' + res.address);
						console.log('纬度：' + res.latitude);
						console.log('经度：' + res.longitude);
					}
				}); 
			 }
		}
	}
</script>
 
<style>
 
</style>